<template>
  <div class="flow">
    <!-- 岗位需求描述 -->
    <div class="formLook">
      <div class="firstTitle" @click="$GoBack()">
        <div class="icon">
          <el-icon>
            <ArrowLeft />
          </el-icon>
        </div>
        <div class="topTitle">岗位明细</div>

        <div
          :class="[
            'status-tag',
            ruleForm.jobStatus === 0 ? 'recruiting' : 'closed',
          ]"
        >
          {{ ruleForm.jobStatus === 0 ? "招聘中" : "关闭中" }}
        </div>
      </div>
      <el-divider />
      <div class="main">
        <div class="title_line">
          <div class="title_img">
            <img src="@/assets//images/demand.png" alt="" />
          </div>
          <p class="title">需求信息</p>
        </div>

        <div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-neekWorksForm"
            status-icon
            style="margin-left: 20px"
            label-position="left"
          >
            <el-form-item
              label="岗位需求描述："
              prop="requireJobOverview"
              label-position="top"
            >
              <el-input
                :disabled="true"
                v-model="ruleForm.requireJobOverview"
              />
            </el-form-item>

            <el-form-item label="需求申请人:" prop="requireProposerName">
              <el-input
                v-model="ruleForm.requireProposerName"
                :disabled="true"
              />
            </el-form-item>

            <el-form-item label="需求部门:" prop="requireDeptName">
              <el-input v-model="ruleForm.requireDeptName" :disabled="true" />
            </el-form-item>

            <el-form-item label="申请时间:" prop="proposeTime">
              <el-input v-model="ruleForm.proposeTime" :disabled="true" />
            </el-form-item>

            <el-form-item label="HR:" prop="hrName">
              <el-input v-model="ruleForm.hrName" :disabled="true" />
            </el-form-item>
          </el-form>
        </div>

        <!-- 岗位信息 -->

        <div class="title_line">
          <div class="title_img">
            <img src="@/assets//images/demand.png" alt="" />
          </div>
          <p class="title">岗位信息</p>
        </div>
        <div>
          <!-- 岗位信息表单 -->
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            class="demo-neekWorksForm"
            status-icon
            label-position="left"
            style="margin-left: 20px"
          >
            <el-form-item label="岗位名称:" prop="jobName">
              <el-input :disabled="true" v-model="ruleForm.jobName" />
            </el-form-item>

            <el-form-item label="招聘类型:" prop="recruitmentType">
              <el-select
                :disabled="true"
                v-model="ruleForm.recruitmentType"
                clearable
              >
                <el-option
                  v-for="item in sys_recruitment_type"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="职级:" prop="positionLevel">
              <el-input :disabled="true" v-model="ruleForm.positionLevel" />
            </el-form-item>

            <el-form-item label="薪酬范围:" prop="salaryRange">
              <el-input :disabled="true" v-model="ruleForm.salaryRange" />
            </el-form-item>
            <el-form-item
              label="岗位职责:"
              prop="jobResponsibilities"
              label-position="top"
            >
              <el-input
                :disabled="true"
                v-model="ruleForm.jobResponsibilities"
              />
            </el-form-item>
            <el-form-item
              label="任职条件:"
              prop="qualification"
              label-position="top"
            >
              <el-input :disabled="true" v-model="ruleForm.qualification" />
            </el-form-item>
            <el-form-item
              label="岗位关键词:"
              prop="jobKeywords"
              label-position="top"
            >
              <el-input :disabled="true" v-model="ruleForm.jobKeywords" />
            </el-form-item>
            <el-form-item
              :disabled="true"
              label="岗位信息描述文件:"
              prop="file"
              label-position="top"
            >
              <!-- <el-button
                v-if="ruleForm.file"
                class="avatar-uploader-text"
                @click="seeFileView(ruleForm.file)"
                >{{ getFileName(ruleForm.file) }}</el-button
              > -->
              <attachment
                v-if="ruleForm.file && ruleForm.file != null"
                :employeeResignFileVoList="ruleForm.file"
              ></attachment>

              <span v-else>暂无岗位信息描述文件</span>
            </el-form-item>

            <el-form-item label="需求人数:" prop="requirePersonNumber">
              <el-input
                :disabled="true"
                v-model="ruleForm.requirePersonNumber"
              />
            </el-form-item>

            <el-form-item label="需求紧急程度:" prop="requireEmergencyLevel">
              <div
                :style="{
                  color:
                    ruleForm.requireEmergencyLevel == 0
                      ? 'rgba(54, 162, 235)'
                      : ruleForm.requireEmergencyLevel == 1
                      ? 'rgba(245, 154, 35)'
                      : 'rgba(255, 49, 49)',
                }"
              >
                {{
                  ruleForm.requireEmergencyLevel == 0
                    ? "一般"
                    : ruleForm.requireEmergencyLevel == 1
                    ? "紧急"
                    : "非常紧急"
                }}
              </div>
            </el-form-item>

            <el-form-item label="期望到岗日期:" prop="hopeArrivalTime">
              <el-date-picker
                v-model="ruleForm.hopeArrivalTime"
                type="date"
                :disabled="true"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="截止日期:" prop="closeTime">
              <el-date-picker
                v-model="ruleForm.closeTime"
                type="date"
                :disabled="true"
              ></el-date-picker>
            </el-form-item>

            <el-form-item
              :disabled="true"
              label="薪资福利:"
              prop="salaryWelfare"
            >
              <div class="avatar-uploader-text">
                <el-tooltip
                  class="box-item"
                  :content="ruleForm.salaryWelfare"
                  placement="top"
                  effect="light"
                >
                  {{ ruleForm.salaryWelfare || "暂无" }}
                </el-tooltip>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="flowtab_info" v-if="flowableDataList.length > 0">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="流程过程" name="流程过程">
          <div class="flowProcess">
            <steps :flowableDataList="flowableDataList" @close="$GoBack()">
            </steps>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="流程图">
          <bpmnViewer :flowData="flowDatas" :id="hightlightId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { demandDetailsInfo } from "@/api/demandDetails/index.js";
import { useRoute } from "vue-router";
import {
  flowablePhoto,
  flowableRecord,
} from "@/api/flowableApi/flowableApi.js";
import bpmnViewer from "../../../../components/Process/viewer/index.vue";
import steps from "@/components/step/index.vue";
import attachment from "@/components/attachment.vue";

const route = useRoute();
const { proxy } = getCurrentInstance();

const { sys_recruitment_type } = proxy.useDict("sys_recruitment_type");
const activeName = ref("流程过程");
const ruleFormRef = ref(null);
const ruleForm = ref({
  //需求人数
  requirePersonNumber: "",
  //岗位紧急程度
  requireEmergencyLevel: "",
  //希望到岗日期
  hopeArrivalTime: "",
  //截止日期
  closeTime: "",
  //岗位状态 0开启，1关闭
  jobStatus: "",
  // 岗位职责
  jobResponsibilities: "",
  //岗位需求描述
  requireJoboverview: "",
  //需求申请人
  requireProposerId: "",
  requireProposerName: "",
  //需求部门
  requireDeptId: "",
  requireDeptName: "",
  //申请日期
  proposeTime: "",
  //hr
  hrId: "",
  hrName: "",
  // 任职条件
  qualification: "",
  // 岗位关键词
  jobKeywords: "",
  //岗位描述文件
  file: "",
  id: "",
  //岗位名称
  jobName: "",
  // 招聘类型
  recruitmentType: "",
  // 职级
  positionLevel: "",
  // 薪酬范围
  salaryRange: "",
  salaryWelfare: "",
});

// 留痕数据
const flowableDataList = ref([]);
const flowDatas = ref([]);
// 高亮节点id
const hightlightId = ref("");
// 审核按钮
const flowableBtns = ref([]);
// 下一个审批数据
const flowableTodoData = ref([]);
// 路径

onMounted(() => {
  getDemandDetailsInfo();
  if (route.query.processId) {
    init(route.query.processId);
  }
});
const init = async (processId) => {
  try {
    // 留痕
    const recordRes = await flowableRecord({
      procInsId: processId,
      flowKey: "RECRUIT_DEMAND",
    });
    if (recordRes.data.flowList.length > 0) {
      recordRes.data.flowList.sort((a, b) => {
        return Number(b.taskId) - Number(a.taskId) < 0;
      });
      flowableDataList.value = recordRes.data.flowList;
      if (flowableDataList.value.length > 0) {
        nextTick(() => {
          let x = document.querySelectorAll(".el-step__icon-inner");
          x.forEach((item, index) => {
            item.innerHTML = x.length - index;
          });
        });
      }
    }
  } catch (error) {
    console.error(error);
  }
};
const handleClick = (tab) => {
  if (tab.props.name == "流程图") {
    flowablePhoto({
      procInsId: route.query.processId,
      flowKey: "RECRUIT_DEMAND",
    }).then((res) => {
      flowDatas.value = res.data;
      hightlightId.value = res.data.nodeData[res.data.nodeData.length - 1].key;
    });
  }
};
const getDemandDetailsInfo = async () => {
  const res = await demandDetailsInfo(route.query.id);
  if (res.data) {
    Object.keys(res.data).forEach((item) => {
      if (res.data[item]) {
        ruleForm.value[item] = res.data[item];

        ruleForm.value.recruitmentType = res.data.recruitmentType;
        ruleForm.value.jobStatus = res.data.jobStatus;
      }
    });
  }
};
</script>
<style scoped lang="scss">
:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-textarea__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

.flowProcess {
  height: 100%;
}

.status-tag {
  margin-left: 10px;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.recruiting {
  background-color: #e1f3e1;
  color: #33d170;
  border: 1px solid #33d170;
}

.closed {
  background-color: #f5f5f5;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

.station_status {
  display: inline-block;
  padding: 1px 12px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
.avatar-uploader-text {
  max-width: 80%; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.avatar-uploader-text:hover {
  text-decoration: underline;
}

.firstTitle {
  color: #16181d;
  font-weight: 600;
}
.main {
  width: 70%;
}
</style>
